<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>DOM操作内容</title>
	</head>
	<body>
		<p>1:innerText属性
		：获取设置文本内容，除了火狐外其他浏览器都兼容这个方法。火狐提过了类似属性：textContent</p>
	<p>2 innerHYML属性：这个属性不拒绝HTML,虽然innerHTML可以插入HTML,但本身有一定的限制，也就是所谓的作用域元素，离开这个作用域就无效了</p>
	<p>3 outerText属性：在取值的时候和innerText一样，同时火狐不支持，而赋值的方法相当危险，它不单替换了文本内容还将元素直接抹去</p>
	<p>4 outerHTML属性：在取值和innerHTML一致，但是和outerText属性一样很危险，赋值之后会将元素抹去</p>
	
	<p>//缺陷，离开作用域无效
		//box.innerHTML="<script>alert('142');</script>";//script 元素不能被执行
		//box.innerHTML='<style>background:red</style>';//style 不能执行</p>
	<div id="box">
		测试div
	</div>
	</body>
	<script>
		var box = document.getElementById('box');
		alert(box.innerText);//获取文本并过滤掉html,直接删掉，火狐不支持
		box.innerText='<p>123</p>'//赋值并转义html
		alert(getInnerText(box));
/*		
		alert(box.innerHTML);//获取文本,不过滤html
		box.innerHTML='<b>123</b>';//可解析html
		
		alert(box.outerText);
		box.outerText='<b>456</b>';//抹去123
		  
		  alert(box.outerHTML);
		 box.outerHTML='789';
		*/
		
		
		//兼容火狐
		function getInnerText(element){
			if(typeof element.textContent=='string'){//
				return element.textContent;
			}else{
				return element.innerText
			}
		}
		function setInnerText(element,text){
			if (typeof element.textContent=='string') {
				element.textContent =text;
			} else{
				element.innerText =text;
			}
			
		}
		
		/*ps：关于最常用的innerHTML 属性和节点操作方法比较在插入大量html标记时使用innerHTML的效率明显要高很多
		 。因为在设置innerHTML时会创建一个html解析器。这个解析器是浏览器级别的（c++编写）因此执行JavaScript会快很多。
		 但是创建和销毁html解析器也会带来性能损失最好控制在最合理的范围内，如下:
		for(var i=0;i<10;i++){
			ul.innerHTML ='<li>插入的元素和文本</li>';//避免频繁解析
		}
		//改为
		for(var i=0;i<10;i++){
			a= '<li>插入的元素和文本</li>';//临时保存
		}
		ul.innerHTML =a; //只创建一次解析器
		*/
		
		
		
	</script>
	
</html>
